<template>
	<view>
		<!-- 优惠券 -->
		<u-popup :show="showOrderSuccessfullyModal" mode="center" :round="15" :safeAreaInsetBottom="false">
			<view class="model">
				<view class="top align-center">
					<img src="/static/icon/shopCar/icon_tongguo@2x.png" alt="" srcset="">
					<view class="">
						<view class="title">
							下单成功
						</view>
						<view class="sub-title">
							等待商户确认订单
						</view>
					</view>
				</view>
				<view class="center">
					<view class="item align-center justify-between">
						<view class="item-left">
							商户名：
						</view>
						<view class="item-right">
							{{shopInfo.shopName}}
						</view>
					</view>
					<view class="item-border"></view>
					<view class="item align-center justify-between">
						<view class="item-left">
							收货人：
						</view>
						<view class="item-right">
							{{address.receiveName}} / {{address.receivePhone}}
						</view>
					</view>
					<view class="item-border"></view>
					<view class="item align-center justify-between">
						<view class="item-left">
							收货地址：
						</view>
						<view class="item-right">
							{{address.address}}
						</view>
					</view>
					<view class="item-border"></view>
					<view class="item align-center justify-between">
						<view class="item-left">
							合 计：
						</view>
						<view class="item-right" style="font-weight: 600;color: #E86C64;">
							<span>￥</span>
							<span>{{getSettlement.total}}</span>
						</view>
					</view>
				</view>
				<view class="bottom align-center">
					<view class="back" @click="cancel">
						返回
					</view>
					<view class="border-center">

					</view>
					<view class="check" @click="pushOrderDetail">
						查看订单
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "order-successfully",
		props: {
			showOrderSuccessfullyModal: {
				type: Boolean,
				default: false
			},
			getSettlement: {
				type: Object,
				default: () => {}
			},
			address: {
				type: Object,
				default: () => {}
			},
			submitData: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				customStyleOne: {
					width: '700rpx',
					height: '75rpx',
					borderRadius: '38rpx',
					margin: '25rpx',
					fontSize: '28rpx',
				},
				shopInfo: null
			};
		},
		created() {
			this.shopInfo = uni.getStorageSync('shopInfo');
			console.log(this.shopInfo, 'this.shopInfo');
		},
		methods: {
			pushOrderDetail() {
				console.log(this.submitData, 'submitData');
				this.$emit('showOrderSuccessfullyModal', false)
				uni.navigateTo({
					url: '/pages/order/orderDetail?orderId=' + this.submitData.orderId+ '&state=0',
				});
			},
			cancel() {
				this.$emit('showOrderSuccessfullyModal', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.model {
		height: 615rpx;
		width: 660rpx;

		.top {
			background: #F9625D;
			height: 146rpx;
			border-radius: 32rpx 32rpx 0px 0px;

			img {
				width: 66rpx;
				height: 66rpx;
				margin-right: 30rpx;
				margin-left: 37rpx;
			}

			.title {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}

			.sub-title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 39rpx;
			}
		}

		.center {
			margin: 0 29rpx;

			.item {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 39rpx;
				height: 90rpx;
			}

			.item-border {
				height: 1rpx;
				background: #999999;
				opacity: 0.2;
			}
		}

		.bottom {
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
			border-top: 1px solid #eee;

			.back {
				flex: 1;
				text-align: center;
			}

			.border-center {
				width: 1px;
				height: 104rpx;
				background: #999999;
				opacity: 0.2;
			}

			.check {
				flex: 1;
				text-align: center;
			}
		}
	}

	.nodata {
		text-align: center;

		img {
			height: 6rpx;
			width: 456rpx;
			margin: 51rpx 142rpx 16rpx;
		}

		.no-price {
			height: 27rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 36rpx;

		}
	}

	.no-use-button {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 124rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 24px 0px rgba(51, 51, 51, 0.1800);
		box-sizing: border-box;
	}
</style>
